<template>
  <div class="common-layout">

    <div class="head">
      <div class="top"><hr class="hr"></div>
      <div class="center">
        <div class="title">
          <el-menu mode="horizontal" default-active="2" active-text-color="green" :ellipsis="false"
                   text-color="black">
            <div class="logo">
              <el-popover placement="bottom" trigger="hover" content="微信支付合作伙伴平台" :width="170"><template #reference>
                <el-menu-item index="1"><img src="11.png"></el-menu-item>
              </template>
              </el-popover>
            </div>
            <div class="flex-grow"></div>
            <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
            <el-menu-item index="2">成为合作伙伴</el-menu-item>
            <el-menu-item index="3"><router-link to="/ability">合作伙伴能力</router-link></el-menu-item>
            <el-menu-item index="4"><router-link to="/grow">合作伙伴成长</router-link></el-menu-item>
            <el-menu-item index="5"><router-link to="/file">文档中心</router-link></el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>

        <div class="main-content" style="display: flex; flex-direction: column; align-items: center; justify-content: center; ">
          <img src="download.png" alt="Background Image" style="width: 100%; height: 276px; object-fit: cover;">
          <h1 style="font-size: 24px; color: white; text-align: left; margin-top: -100px; margin-right: 700px">成为微信支付合作伙伴</h1>
        </div>
        <div style="width: 1025px;height: 126px; margin: 0 auto">
              <el-menu mode="horizontal" active-text-color="green" background-color="white" text-color="green" style="text-align: center; width: 100%;height: 100%; margin: -60px auto 0 ;" >
             <el-menu-item index="1" style="width: 30%;height: 100%;" >
               <div  style="width: 100%;height: 50%; font-size: 22px;" >为商家提供</div>
               <div style=" width: 100%;height: 50%; font-size: 30px;"><b>支付服务</b></div>
             </el-menu-item>
                <el-menu-item index="1" style="width: 30%;height: 100%;" >
                  <div  style="width: 100%;height: 50%; font-size: 22px;" >为商家提供</div>
                  <div style=" width: 100%;height: 50%; font-size: 30px;"><b>经营服务</b></div>

                </el-menu-item>

                <el-menu-item index="1" style="width: 31%;height: 100%;" >
                  <div  style="width: 100%;height: 50%; font-size: 22px;" >为商家提供</div>
                  <div style=" width: 100%;height: 50%; font-size: 30px;"><b>硬件服务</b></div>

                </el-menu-item>
              </el-menu>
          <div style="width: 720px;height: 104px;margin: 0 auto">
            <h1>帮助商家在一般场景下使用收款功能</h1>
            <p>帮助商家在线下门店，小程序，公众号，移动应用app，网页等各个交易场景下使用微信支付进行收款满足商家不同场景下的支付诉求，让商家轻松接入微信支付</p>
          </div>
          <el-carousel  style="margin: 0 auto">
            <el-carousel-item><img src="img.png" style="width: 80% ;height:80%"></el-carousel-item>
            <el-carousel-item><img src="img_1.png" style="width: 80% ;height:80%"></el-carousel-item>
            <el-carousel-item><img src="img_2.png" style="width: 80% ;height:80%"></el-carousel-item>
            <el-carousel-item><img src="img_3.png" style="width: 80% ;height:80%"></el-carousel-item>
            <el-carousel-item><img src="img_4.png" style="width: 80% ;height:80%"></el-carousel-item>

          </el-carousel>
          


        </div>
    <div>
    <el-card style="width: 1200px;height: 500px;background-color:#FAFAFAFF; margin: 500px auto 0">
      <h1>为商家提供支付服务</h1>
      <p>开通以下产品能力，快速为商家提供服务</p>
      <div style="margin: 30px 30px;">
        <div style="display: inline-block; vertical-align: top; margin: 55px ;">
          <el-icon size="100px" ><School /></el-icon>
          <p style="display: block; padding-top: 10px;">门店收款</p>
        </div>

        <div style="display: inline-block; vertical-align: top; margin: 55px ;">
          <el-icon size="100px" ><Tickets/></el-icon>
          <p style="display: block; padding-top: 10px;">公众号收款</p>
        </div>

        <!-- 其他图标和文字类似处理 -->

        <div style="display: inline-block; vertical-align: top; margin: 55px ;">
          <el-icon size="100px" ><Platform /></el-icon>
          <p style="display: block; padding-top: 10px;">小程序收款</p>

        </div>
        <div style="display: inline-block; vertical-align: top; margin: 55px ;">
          <el-icon size="100px"><Memo /></el-icon>
          <p style="display: block; padding-top: 10px;">网页收款</p>

        </div>

        <div style="display: inline-block; vertical-align: top; margin: 55px ;">
          <el-icon size="100px"><Apple /></el-icon>
          <p style="display: block; padding-top: 10px;">移动应用收款</p>

        </div>
      </div>
    </el-card>
      </div>
    <div style="margin: 0 auto; width: 900px;height: 700px;">
    <h1 class="p1">合作伙伴合作方案</h1 >
    <p class="p2">合作方案覆盖微信支付多个行业及场景，协助合作伙伴拓展业务，携手共建良好支付生态</p >
    <el-row :gutter="20">
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color:  #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >基础合作</div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px">合作对象为商户提供微信支付线下场景得技术服务支持</div>
            <el-icon size="70" style="float: left;color: #e8e8e8"><Coffee /></el-icon>

          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color: #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >餐饮
              </div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px">合作对象为商户提供餐饮行业的技术服务及支持</div>
            <el-icon size="70" style="float: left;color: #e8e8e8"><ForkSpoon /></el-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color: #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >停车
          </div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px">    合作对象为商户提供停车行业的支术服务及支持</div>
            <el-icon size="70" style="float: left;color: #e8e8e8"><WindPower /></el-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color: #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >高速
</div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px">合作对象为商户提供高速行业的技术服务及支持</div>
            <el-icon size="70" style="float: left;color: #e8e8e8"><Promotion /></el-icon>

          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color: #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >加油</div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px">合作对象为商户提供加油行业的技术服务及支持</div>
            <el-icon size="70" style="float: left;color: #e8e8e8">
              <Flag />
            </el-icon>
          </div>

        </el-card>
      </el-col>
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color: #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >客运船运票务
           </div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px">   合作对象为商户提供客运船运票务的技术服务及支持</div>
            <el-icon size="70" style="float: left;color: #e8e8e8">
              <Ship />
            </el-icon>

          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color: #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >公交票务
             </div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px"> 技术服务及支持
              合作对象为商户提供公交票务的</div>
            <el-icon size="70" style="float: left;color: #e8e8e8"><Van /></el-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin: 10px 0;">
        <el-card style="width: 210px;height: 300px;background-color: #00AA96" >
          <div >
            <div style=";color: white;font-size: 20px;margin-bottom: 8px;float: left" >百货</div>
            <div style="color: white;font-size: 12px;float: left;margin-bottom: 90px">合作对象为商户提供百货行业的技术服务及支持</div>
            <el-icon size="70" style="float: left;color: #e8e8e8"><OfficeBuilding /></el-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>>
    </div>
    <div style="margin: 50px auto 0 ;background-color:#FAFAFAFF;">
      <div><h1>开通流程</h1></div>
      <el-row gutter="5" style=" height: 200px;">
        <el-col :span="4">
          <el-card style="height: 100%;">
            <h1>1.</h1>
            <h2>合作伙伴入驻</h2>
            <p>注册成为微信支付合作伙伴</p>
          </el-card>

        </el-col>
        <el-col :span="4">
          <el-card style="height: 100%;">
            <h1>2.</h1>
            <h2>商家管理</h2>
            <p>申请成为普通商户或普通服务商</p>

          </el-card>

        </el-col>
        <el-col :span="4">
          <el-card style="height: 100%;">
            <h1>3.</h1>
            <h2>开通合作工具箱
              </h2>
            <p>选择合适企业发展的合作工具箱</p>
          </el-card>

        </el-col>
        <el-col :span="4">
          <el-card style="height: 100%;">
            <h1>4.</h1>
            <h2>申请技术服务费
              </h2>
            <p>申请合作工具箱有关的技术服务费</p>
          </el-card>

        </el-col>
        <el-col :span="4">
          <el-card style="height: 100%;">
            <h1>5.</h1>
            <h2>应用场景
              </h2>
            <p>员工费用报销、福利发放、合作伙伴转账等。</p>
          </el-card>

        </el-col>
        <el-col :span="4">
          <el-card style="height: 100%;">
            <h1>6.</h1>
            <h2>立即成为微信支付合作伙伴</h2>
              <p>微信公众号授权认证</p>

          </el-card>

        </el-col>
      </el-row>


    </div>
    <el-footer style="background-color: rgb(50,50,50);color:#666;height: 300px;
    padding:50px;text-align:center;margin-top: 100px">
      <!--设置版心 定宽且居中-->
      <div style="width: 1200px;margin-left: 170px;margin: 0 auto">
        <el-row :gutter="10">
          <!--底部中间区域 三列信息 注意此处内容有单独的CSS内部样式 id="footer-center"-->
          <el-col :span="12" id="footer-center" style="margin: 0 auto">
            <!--继续嵌套还是从row开始 -->
            <el-row :gutter="30">
              <el-col :span="6">
                <h3>关于我们</h3>
                <p>关于微信支付</p >
                <p>合作规则</p >
                <p>平台使用协议</p >
                <p>支付服务协议</p >
                <p>联系我们</p >
              </el-col>
              <el-col :span="7">
                <h3 >服务与支持</h3>
                <p>开发文档(商户)</p >
                <p>开发文档(合作伙伴)</p >
                <p>物理下载</p >
                <p>帮助中心</p >
              </el-col>
              <el-col :span="6">
                <h3>友情链接</h3>
                <p>微信开放平台</p >
                <p>微信开放平台</p >
                <p>企业微信</p >
              </el-col>
              <el-col :span="5">
                <h3>客服帮助</h3>
                <p>自助服务专区</p >
                <p>客服:95017-2</p >
                <p>(周一到周五 09:00-18:00)</p >
              </el-col>
            </el-row>

          </el-col>
          <el-row>
            <el-col>
              <p style="font-size: 11px;color: white;height: 20px;">关注微信支付服务商助手公众号</p >
              < img src="ewm.jpg" width="129px" height="129px">
            </el-col>
          </el-row>
        </el-row>
      </div>
    </el-footer>






  </div>

</template>

<script setup>

import {
  Apple,
  Coffee,
  DishDot, Flag,
  ForkSpoon,
  Notebook, OfficeBuilding,
  Platform,
  Promotion,
  School,
  Sell, Ship,
  Tickets, Van
} from "@element-plus/icons-vue";
</script>

<style scoped>
h3{
  color: #fff;
  margin-bottom: 20px;

}
.head{
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99;
}

.container {
  width: 300px;
  height: 200px;
  overflow-x: auto; /* 或 overflow: auto; */
}
.top{
  width: 100%;
  margin: 0 auto;
}
.hr{
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: 3px solid limegreen;
}
.head{
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99;
}
.center{
  width: 1000px;
  height: 88px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.center img{
  float: left;
  width: 100%;

}
.title{
  position: absolute;
  bottom: 0;
}


</style>